import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Flex,
  Text,
} from '@chakra-ui/react';
// import { createSelector } from '@reduxjs/toolkit';
import { skipToken } from '@reduxjs/toolkit/dist/query';

import {
  BoardDTO,
  useDeleteBoardAndImagesMutation,
  useDeleteBoardMutation,
  useListAllImageNamesForBoardQuery,
} from '@tourfly/api';

import { memo, useCallback, useMemo, useRef } from 'react';

import IAIButton from '@/common/components/IAIButton';

type Props = {
  boardToDelete?: BoardDTO;
  setBoardToDelete: (board?: BoardDTO) => void;
};

const DeleteBoardModal = (props: Props) => {
  const { boardToDelete, setBoardToDelete } = props;
  // const { t } = useTranslation();

  const { currentData: boardImageNames, isFetching: isFetchingBoardNames } =
    useListAllImageNamesForBoardQuery(boardToDelete?.board_id ?? skipToken);

  const [deleteBoardOnly, { isLoading: isDeleteBoardOnlyLoading }] =
    useDeleteBoardMutation();

  const [deleteBoardAndImages, { isLoading: isDeleteBoardAndImagesLoading }] =
    useDeleteBoardAndImagesMutation();

  const handleDeleteBoardOnly = useCallback(() => {
    if (!boardToDelete) {
      return;
    }
    deleteBoardOnly(boardToDelete.board_id);
    setBoardToDelete(undefined);
  }, [boardToDelete, deleteBoardOnly, setBoardToDelete]);

  const handleDeleteBoardAndImages = useCallback(() => {
    if (!boardToDelete) {
      return;
    }
    deleteBoardAndImages(boardToDelete.board_id);
    setBoardToDelete(undefined);
  }, [boardToDelete, deleteBoardAndImages, setBoardToDelete]);

  const handleClose = useCallback(() => {
    setBoardToDelete(undefined);
  }, [setBoardToDelete]);

  const cancelRef = useRef<HTMLButtonElement>(null);

  const isLoading = useMemo(
    () =>
      isDeleteBoardAndImagesLoading ||
      isDeleteBoardOnlyLoading ||
      isFetchingBoardNames,
    [
      isDeleteBoardAndImagesLoading,
      isDeleteBoardOnlyLoading,
      isFetchingBoardNames,
    ]
  );

  if (!boardToDelete) {
    return null;
  }

  return (
    <AlertDialog
      isOpen={Boolean(boardToDelete)}
      onClose={handleClose}
      leastDestructiveRef={cancelRef}
      isCentered
    >
      <AlertDialogOverlay>
        <AlertDialogContent>
          <AlertDialogHeader fontSize="lg" fontWeight="bold">
            正在操作删除: {boardToDelete.board_name}
          </AlertDialogHeader>

          <AlertDialogBody>
            <Flex direction="column" gap={3}>
              <Text>图集删除无法恢复，请谨慎操作！</Text>
            </Flex>
          </AlertDialogBody>
          <AlertDialogFooter>
            <Flex sx={{ justifyContent: 'flex-end', width: 'full', gap: 2 }}>
              <IAIButton
                colorScheme="error"
                isLoading={isLoading}
                onClick={handleDeleteBoardAndImages}
              >
                删除图集和作品
              </IAIButton>
              <IAIButton
                colorScheme="warning"
                isLoading={isLoading}
                onClick={handleDeleteBoardOnly}
              >
                删除图集，保留作品
              </IAIButton>

              <IAIButton ref={cancelRef} onClick={handleClose}>
                取消
              </IAIButton>
            </Flex>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogOverlay>
    </AlertDialog>
  );
};

export default memo(DeleteBoardModal);
